<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>乘客信息</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="/yunfu/Public/Css/my.css" rel="stylesheet">

    <script src="/yunfu/Public/Js/my.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #f0f0f0;">
<div class="container">
    <div class="row top">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="left">
        <img src="/yunfu/Public/images/back-white.png" align="center" id="back">
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" align="center">
        <span>乘客信息</span>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="right">
        <img src="/yunfu/Public/images/home.png" align="center" id="home">
    </div>
</div>
<script>
    mBind("<?php echo U('Index/index');?>");
</script>
    <!--topbar ends here-->

    <div class="row psg-bn-group" align="center">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-offset-2" onclick="onAdd()" style="background-color: #cccccc;border-radius: 5px;color: white;padding: 5px 0px 5px 0px;">
            <img src="/yunfu/Public/images/add-25.png">新增乘客
        </div>
    </div>
    <!--taker list foreach goes here-->
    <?php if(empty($buyerlist)): ?><div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center" style="color:gray;">
                无乘车人信息
            </div>
        </div>
        <?php else: ?>
        <?php if(is_array($buyerlist)): foreach($buyerlist as $key=>$buyer): ?><div class="row psg-taker-item" id="item-<?php echo ($buyer["id"]); ?>">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="row">
                        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">
                                    姓名:<span style="color:gray;" id="<?php echo ($buyer["id"]); ?>-name"><?php echo ($buyer["name"]); ?></span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">
                                    手机:<span style="color:gray;" id="<?php echo ($buyer["id"]); ?>-phone"><?php echo ($buyer["phone"]); ?></span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: small;">
                                    身份证:<span style="color:gray;" id="<?php echo ($buyer["id"]); ?>-identity"><?php echo ($buyer["identity"]); ?></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="margin-top: 10px;;">
                            <img src="/yunfu/Public/images/modify-25.png" class="order-img"
                                 onclick="onModify('<?php echo ($buyer["id"]); ?>')">
                            <img src="/yunfu/Public/images/delete-25.png" class="order-img"
                                 style="background-color: #d9544f" onclick="onDelete('<?php echo ($buyer["id"]); ?>')">
                        </div>
                    </div>
                </div>
            </div><?php endforeach; endif; endif; ?>
</div>
<!--进度图片-->
<div class="container">
    <div class="row" style="position: absolute;top: 50%;left: 50%;display: none;background-color: #f0f0f0;" id="progress">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <img src="/yunfu/Public/images/progress.gif">
        </div>
    </div>
</div>

<!-- 修改乘客信息模态框 -->
<div class="modal fade" id="modify-dialog" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" style="position:absolute;top:20%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399ff;padding: 5px;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">修改信息</h4>
            </div>
            <div class="modal-body"
                 style="height:200px;border: none;overflow: auto;padding-top:10px;padding-bottom: 5px;">
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        姓名:
                        <input type="text" value="" class="none-input" id="modify-name">
                        <input type="hidden" value="" class="none-input" id="modify-name-old">
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        手机:
                        <input type="text" value="" class="none-input" id="modify-phone">
                        <input type="hidden" value="" class="none-input" id="modify-phone-old">
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        身份证:
                        <input type="text" value="" class="none-input" id="modify-identity">
                        <input type="hidden" value="" class="none-input" id="modify-identity-old">
                    </div>
                </div>
                <input type="text" value="" hidden id="modify-id">
            </div>
            <div class="modal-footer" style="padding: 5px;margin-top: 0px;">
                <button type="button" class="btn btn-primary" onclick="onModifySubmit()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--add dialog-->
<div class="modal fade" id="add-dialog" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" style="position:absolute;top:20%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399ff;padding: 5px;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">添加乘客</h4>
            </div>
            <div class="modal-body"
                 style="height:200px;border: none;overflow: auto;padding-top:10px;padding-bottom: 5px;">
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        姓名:
                        <input type="text" class="none-input" placeholder="姓名" id="add-name">
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        手机:
                        <input type="text" class="none-input" placeholder="手机号码" id="add-phone">
                    </div>
                </div>
                <div class="row" style="border-bottom: darkgray solid 1px;padding:5px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        身份证:
                        <input type="text" class="none-input" placeholder="身份证号" id="add-identity">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding: 5px;margin-top: 0px;">
                <button type="button" class="btn btn-primary" onclick="onAddSubmit()">添加</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function onAdd(){
        $("#add-dialog").modal('show');
    }

    function onAddSubmit(){
        if(!checkInfo('add-name','add-phone','add-identity')){
            return;
        }
        var name = $("#add-name").val();
        var phone = $("#add-phone").val();
        var identity = $("#add-identity").val();

        window.location.href="<?php echo U('Account/add');?>&name="+name+"&phone="+phone+"&identity="+identity;
    }
    /**
     * clear all the values in the add-dialog,supposed to be invoked after add successfully
     */
    function clearAdd(){
        $("#add-name").val('');
        $("#add-phone").val('');
        $("#add-identity").val('');
    }

    function onDelete(buyerId) {
        if(!confirm("确定删除?")){
            return;
        }
        showProgress();
        //alert(buyerId);return;
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"<?php echo U('Account/delete');?>",
            data:"id="+buyerId,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success:function(json){
                if(json.status == 0){
                    hideProgress();
                    alert('删除失败,服务器出问题了哦!');
                } else {
                    hideProgress();
                    $("#item-"+buyerId).css("display","none");
                    alert('删除成功');
                }
            },
            error:function(msg){
                hideProgress();
                alert("删除失败,请检查网络");
            }
        });
    }

    function onModify(buyerId) {
        var name = $("#" + buyerId + "-name").text();
        var phone = $("#" + buyerId + "-phone").text();
        //alert(phone);
        var identity = $("#" + buyerId + "-identity").text();
        setModifyField(buyerId,name,phone,identity);
        $("#modify-dialog").modal('show');
    }

    function setModifyField(id, name, phone, identity) {
        $("#modify-id").val(id);
        $("#modify-name").val(name);
        $("#modify-phone").val(phone);
        $("#modify-identity").val(identity);
        $("#modify-name-old").val(name);
        $("#modify-phone-old").val(phone);
        $("#modify-identity-old").val(identity);
    }

    function onModifySubmit() {
        //是否修改内容
        if (($("#modify-name-old").val() == $("#modify-name").val() && $("#modify-phone").val() == $("#modify-phone-old").val() && $("#modify-identity").val() == $("#modify-identity-old").val())) {
            $("#modify-dialog").modal('hide');
            return;
        }
        //输入是否合法
        if(!checkInfo('modify-name','modify-phone','modify-identity')){
            return;
        }
        showProgress();
        $("#modify-dialog").modal('hide');
        $.ajax({
            type: 'POST',
            dataType: "json",
            url: "<?php echo U('Account/modify');?>",
            data: "id=" + $("#modify-id").val() + "&name=" + $("#modify-name").val() + "&phone=" + $("#modify-phone").val() + "&identity=" + $("#modify-identity").val(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                if (json.status == 0) {
                    hideProgress();
                    alert('修改失败');
                } else {
                    hideProgress();
                    $("#" + $("#modify-id").val() + "-name").html(json.new.name);
                    $("#" + $("#modify-id").val() + "-phone").html(json.new.phone);
                    $("#" + $("#modify-id").val() + "-identity").html(json.new.identity);
                    alert("修改成功");
                }
            },
            error: function (msg) {
                hideProgress();
                alert('修改错误,请检查网络');
            }
        });
    }
</script>
</body>
</html>